<!--视频header-->
<template>
  <div class="videoTitle" @click="videoDetail(channelObj, '1')">
    <div class="leftImg">
      <img :src="channelObj.coverPath" />
      <div class="bofanPop" v-show="urlSplit == 'videoTtv' ? false : true">
        <img
          class="bofangBtn"
          :src="PIC_URL + '/experience/bofang.png'"
          width="100%"
        />
      </div>
    </div>
    <div class="rightText">
      <p class="titleName">
        {{ channelObj.channelName }}
        <span class="zhibo" v-if="channelObj.status == 1 ? true : false"
          >直播中 <i class="icon"></i
        ></span>
      </p>
      <p class="text" v-html="channelObj.channelDescription"></p>
    </div>
  </div>
</template>

<script>
import { queryVideoConfigById } from "../script/api";
export default {
  data() {
    return {
      channelObj: {},
      urlSplit: "",
    };
  },
  filters: {},
  created() {},
  mounted() {
    this.urlSplit = window.location.href.split("?")[0].split("#/")[1];
    this.queryVideoConfigById();
  },
  methods: {
    // 视频频道接口
    async queryVideoConfigById() {
      await queryVideoConfigById(this.$route.query.configId)
        .then((res) => {
          if (res.status == 1) {
            this.channelObj = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 播放详情
    videoDetail(item, type) {
      console.log(item, "item==");
      if (this.urlSplit == "videoTtv") return;
      let configId = type == 1 ? item.id : item.configId;
      this.$router.push({
        path: "/videoTtv",
        query: {
          configId: configId,
          path: 1,
          videoId: this.$route.query.videoId,
        },
      });
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.videoTitle {
  width: 100%;
  height: 140px;
  border: 1px solid #c9c9c9;
  display: flex;
  padding: 16px 23px 15px 18px;
  box-sizing: border-box;
  margin-top: 50px;
  .leftImg {
    width: 163px;
    height: 109px;
    margin-right: 37px;
    cursor: pointer;
    img {
      width: 163px;
      height: 100%;
    }
    .bofanPop {
      width: 163px;
      height: 109px;
      position: relative;
      top: -110px;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .bofangBtn {
      position: absolute;
      display: block;
      width: 57px;
      height: 57px;
      transform: translate(50px, 40%);
    }
  }
  .rightText {
    line-height: 24px;
    .titleName {
      margin-bottom: 12px;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      .zhibo {
        font-size: 16px;
        color: #ea2827;
        .icon {
          display: inline-block;
          width: 28px;
          height: 26px;
          background: url($PIC_URL+"/experience/icon.png") 100% 100%;
        }
      }
    }
    .text {
      font-size: 14px;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 50px;
    }
  }
}
</style>
